<script>
import { slotFlagsText } from '@vue/shared';

export default {
  data() {
    return {
      show: true,
      sildeShow: true,
      bounceShow: true,
      customShow: true
    }
  }, methods: {
    all_close() {
      this.show = false
      this.sildeShow = false
      this.bounceShow = false
      this.customShow = false
    },
    all_open() {
      this.show = true
      this.sildeShow = true
      this.bounceShow = true
      this.customShow = true
    }
  }
}

</script>

<template>
  <button @click="all_close" class="red-1">all close</button>
  <span>--------</span>
  <button @click="all_open" class="red-2">all open</button>
  <br>
  <button @click="show = !show" class="red-3">show</button>
  <button @click="sildeShow = !sildeShow" class="red-4"> Silde</button>
  <button @click="bounceShow = !bounceShow" class="red-5"> bounce</button>
  <button @click="customShow = !customShow" class="red-6">custom </button>
  <Transition>
    <p v-if="show" class="red">show</p>
  </Transition>
  <Transition name="slide">
    <p v-if="sildeShow" class="red">sildeShow</p>
  </Transition>
  <Transition name="bounce">
    <p v-if="bounceShow" class="red">bounceShow</p>
  </Transition>
  <Transition name="custom" enter-active-class="animate__animated animate__tada"
    leave-active-class="animate__animated animate__bounceOutRight">
    <p v-if="customShow" class="red">customShow</p>
  </Transition>
</template>

<style>
@import "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css";

.red-1 {
  position: relative;
  background: orangered;
  border: none;
  color: white;
  padding: 8px 10px;
  font-size: 1.2rem;
  outline: none;
  box-shadow: -6px 6px 0 hsl(16, 90%, 30%);
}

.red-2 {
  position: relative;
  background: rgb(0, 247, 255);
  border: none;
  color: white;
  padding: 8px 10px;
  font-size: 1.2rem;
  outline: none;
  box-shadow: -6px 6px 0 rgb(8, 136, 145);
}

.red-2:active {
  background: hsl(118, 71%, 70%);
  top: 3px;
  left: -3px;
  box-shadow: -3px 3px 0 hsl(263, 68%, 76%);
}

.red-3 {
  position: relative;
  background: #ecd300;
  background: radial-gradient(hsl(54, 100%, 50%), hsl(54, 100%, 50%));
  font-size: 1.4rem;
  text-shadow: 0 -1px 0 #c3af07;
  color: white;
  border: 1px solid hsl(54, 100%, 50%);
  border-radius: 100%;
  height: 120px;
  width: 120px;
  z-index: 4;
  outline: none;

  box-shadow: inset 0 1px hsl(54, 100%, 50%),
    0 2px hsl(54, 100%, 20%),
    0 3px hsl(54, 100%, 18%),
    0 4px hsl(54, 100%, 16%),
    0 5px hsl(54, 100%, 14%),
    0 6px hsl(54, 100%, 13%),
    0 7px hsl(54, 100%, 10%),
    0 8px hsl(54, 100%, 8%),
    0 9px hsl(54, 100%, 6%);
}

.red-3:active {
  top: 2px;
  box-shadow: inset 0 1px hsl(54, 100%, 50%),
    0 2px hsl(54, 100%, 20%),
    0 3px hsl(54, 100%, 18%),
    0 4px hsl(54, 100%, 16%),
    0 5px hsl(54, 100%, 14%),
    0 6px hsl(54, 100%, 13%),
    0 7px hsl(54, 100%, 10%);
}

.red-4 {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 20px 40px;
  font-size: 1.4rem;
  box-sizing: border-box;
  background-color: #e7eef1;
  color: orangered;
  border: solid 10px transparent;
  border-image: linear-gradient(to top right, orangered, yellow);
  border-image-slice: 1;
}

.red-4:hover {
  color: white;
  border-image: linear-gradient(to top right, orangered, yellow);
  border-image-slice: 1 fill;
}

.red-5 {

  border: solid 4px transparent;
  border-image: linear-gradient(to right, rgb(0, 225, 255), transparent);
  border-image-slice: 1;
}

.red-5:hover {
  color: white;
  background-image: linear-gradient(to right, rgb(0, 174, 255), transparent);
  border-right: none;
}

.red-6 {
  position: relative;
  display: inline-block;
  padding: 20px 40px;
  font-size: 1.4rem;
  background-color: #00b3b4;
  background-image: url("../../img/1.png");
  background-size: 160px 100px;
  border: 1px solid #555;
  color: white;
  transition: all ease 0.3s;
}

.red-6:hover {
  animation: waving 2s linear infinite;
}

@keyframes waving {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 160px 0;
  }
}

.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}


.slide-enter-active {
  transition: all 0.3s ease-out;
}

.slide-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.6, 1);
}

.slide-enter-from,
.slide-leave-to {
  transform: translateX(20px);
  opacity: 0;
}



.bounce-enter-active {
  animation: bounce-in 0.5s;
}

.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}

@keyframes bounce-in {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1.25);
  }

  100% {
    transform: scale(1);
  }
}
</style>